<template>
  <div id="app" class="app">
    <v-header :class="{ navBarWrap: navBarFixed }"></v-header>

    <el-row type="flex" justify="center" id="content">
      <vue-particles
        id="particles-js"
        color="#dedede"
        :particleOpacity="0.9"
        :particlesNumber="90"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
      <el-col :xs="20" :md="20" :style="{ minHeight: minHeight + 'px' }">
        <router-view></router-view>
      </el-col>
    </el-row>
    <v-footer :data="cacheData"></v-footer>
  </div>
</template>

<script>
import configRequest from "./api/config";
import cache from './utils/cache'
export default {
  name: "app",
  data() {
    return {
      minHeight: 0,
      navBarFixed: false,
      cacheData: null,
    };
  },
  components: {},
  created() {
    configRequest.getConfigList().then((res) => {
      if (res.data.code != "200") {
        this.$message({
          message: "加载配置信息数据失败！",
          type: "error",
        });
        return false;
      }
      this.cacheData = res.data.data
      cache.setCache('appConfig', res.data.data)
    });
  },
  methods: {
    watchScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //  当滚动超过 50 时，实现吸顶效果
      if (scrollTop > 50) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    },
    setConfigCache(data) {
      sessionStorage.setItem('appConfig', data);
    }
  },
  mounted() {
    let that = this;
    that.minHeight = document.documentElement.clientHeight;
    window.addEventListener("scroll", that.watchScroll);
    window.onresize = function () {
      that.minHeight = document.documentElement.clientHeight;
    };
  },
};
</script>

<style scoped>
.app {
  font-family: "microsoft yahei";
}
#content {
  padding-top: 20px;
  background-color: #f9f9f9;
}
.navBarWrap {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}
#particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}
</style>
